<template>
	<view class="flow-box">
		<view class="item" :class="item.left == 1 ? 'right' : 'left'" :style="'top:' + item.top + 'px'" v-for="(item, index) in list" :key="index" 
			<!-- #ifdef H5 -->
			:data-item="JSON.stringify(item)"
			<!-- #endif -->
			<!-- #ifndef H5 -->
			:data-item="item"
			<!-- #endif -->
			@click="choose">
			<image class="more-i" :src="item.mainImage"></image>
			<wxc-elip class="more-item-title" :line="1">{{ item.goodsName }}</wxc-elip>
			<wxc-elip class="more-item-tips" :line="2">{{ item.goodIntroduce }}</wxc-elip>
			<view class="price">
				<text class="more-item-price-unit">￥</text>
				<text class="more-item-price-value">{{ item.goodsDetailVo[0].goodsPrice }}</text>
			</view>
			<!-- 下面这个为了将布局撑开 -->
			<view style="margin-top: 45upx;width:20upx;height: 1px;"></view>
		</view>
		
	</view>
</template>

<script>
import wxcElip from '@/components/custom/wxc-elip.vue';
export default {
	components: {
		wxcElip
	},
	props: {
		// 数据列表
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		mtop:{
			type:Number,
			default:12
		}
	},
	data() {
		return {
			mark: 0, // 定位
			loadingTop: 0,
			boxHeight: [] // 计算盒子 2 行的高度
		};
	},
	watch: {
		// 数据
		list: function(newVal, oldVal) {
			this.mark = oldVal.length;
			if (newVal != oldVal) {
				this.$nextTick(function() {
					setTimeout(() => {
						this.waterFall();
					}, 100);
				});
			}
		}
	},
	methods: {
		upx2px(udp) {
			return uni.upx2px(udp);
		},
		// 瀑布流定位
		waterFall() {
			uni.createSelectorQuery()
				.selectAll('.item')
				.boundingClientRect()
				.exec(res => {
					let item = res[0];
					let len = item.length;
					for (let i = this.mark; i < len; i++) {
						let height = parseInt(item[i].height);
						let boxHeight = height;
						if (i < 2) {
							this.$set(this.list[i], 'top', 0);
							this.$set(this.list[i], 'left', i);
							if (height > height) {
								height = height;
								boxHeight = height;
							}
							this.boxHeight.push(boxHeight+this.upx2px(this.mtop));
						} else {
							let minHeight = this.boxHeight[0];
							let boxLen = this.boxHeight.length;
							let index = 0;
							for (var j = 0; j < boxLen; j++) {
								if (minHeight > this.boxHeight[j]) {
									minHeight = this.boxHeight[j];
									index = j;
								}
							}
							this.$set(this.list[i], 'top', this.boxHeight[index]);
							this.$set(this.list[i], 'left', index);
							this.boxHeight[index] = this.boxHeight[index] + boxHeight+this.upx2px(this.mtop);
							this.loadingTop = this.boxHeight[~index + 2];
							setTimeout(() => {
								let maxHeight = this.boxHeight[0];
								for (var j = 0; j < boxLen; j++) {
									if (maxHeight < this.boxHeight[j]) {
										maxHeight = this.boxHeight[j];
									}
								}
								this.loadingTop = maxHeight;
								console.log(this.loadingTop)
							});
						}
					}
				});
		},
		// 选中
		choose(e) {
			let item = e.currentTarget.dataset.item;
			/* #ifdef H5 */
			item = JSON.parse(e.currentTarget.dataset.item);
			/* #endif */
			this.$emit('click', item);
		}
	}
};
</script>

<style scoped>
.flow-box {
	position: relative;
	width: 100%;
}
.flow-box .item {
	position: absolute;
	left: 0;
	width: 345upx;
	background-color: #ffffff;
	box-shadow: 1upx 7upx 27upx 0upx rgba(0, 0, 0, 0.11);
	border-radius: 26upx;
}
.flow-box .left {
	left: 24upx;
}
.flow-box .right {
	left: 380upx;
}

.more-item {
	display: flex;
	flex-direction: column;
	margin-top: 12upx;
	width: 345upx;
	height: auto;
	background-color: #ffffff;
	box-shadow: 1upx 7upx 27upx 0upx rgba(0, 0, 0, 0.11);
	border-radius: 26upx;
}
.more-i {
	width: 345upx;
	height: 352upx;
	background-color: #ff9295;
	border-radius: 26upx 26upx 0upx 0upx;
}
.more-item-title {
	margin-left: 17upx;
	width: 318upx;
	height: auto;
	font-size: 34upx;
	font-weight: bold;
	font-stretch: normal;
	line-height: 34upx;
	letter-spacing: 0upx;
	margin-top: 18upx;
	color: #1a1a1a;
}
.more-item-tips {
	margin-left: 17upx;
	width: 318upx;
	height: auto;
	font-size: 26upx;
	font-weight: medium;
	font-stretch: normal;
	line-height: 42upx;
	letter-spacing: 0upx;
	color: #808080;
	margin-top: 7upx;
}

.price {
	width: 100%;
	margin-left: 17upx;
	margin-top: 16upx;
	height: auto;
	display: flex;
	align-items: baseline;
}
.more-item-price-unit {
	font-size: 24upx;
	font-weight: bold;
	font-stretch: normal;
	line-height: 24upx;
	letter-spacing: 0px;
	color: #ff4d1d;
}

.more-item-price-value {
	font-size: 34upx;
	line-height: 34upx;
	font-weight: bold;
	letter-spacing: 0px;
	color: #ff4d1d;
}
</style>
